<template>
  <div id="map">

  </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import * as control from "ol/control";
import { Logo, TileSuperMapRest } from "@supermap/iclient-ol";
import ImageLayer from 'ol/layer/Image';
import VectorSource from 'ol/source/Vector';

export default {
  name: "supermap",
  data(){
    return{
      Map:null
    }
  },
  mounted(){
    this.init();
  },
  methods:{
    init(){
      var url = "http://123.56.110.82:8090/iserver/services/map-WYCSSJ0407/rest/maps/WYDLTB";
      this.map = new Map({
        target: "map",
        //controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
        view: new View({
          center: [115.87,37.91],
          zoom: 13,
          projection: "EPSG:4326",
        })
      });
      var layer = new TileLayer({
        source: new TileSuperMapRest({
          url: url,
          wrapX: true,
          transparent:true,
        }),
        projection: "EPSG:4326"
      });
      this.map.addLayer(layer);
    }
  }
}
</script>

<style scoped>
#map{
  height: 600px;
  width: 600px;
}
</style>
